<script setup lang="ts">
import { getObjectFromKey } from "../../../utils";
import KSpace from "./KSpace.vue";

type Prop = {
  width?: any;
  label?: string;
  prop?: string;
  subtitle?: string;
  wrapSpace?: boolean;
  wrapDirection?: "column" | "row";
  wrapGap?: number;
  props?: { label: string; subTitle: string };
};

withDefaults(defineProps<Prop>(), {
  wrapSpace: true,
  wrapDirection: "column",
  wrapGap: 10
});
</script>

<template>
  <el-table-column :width="width" :label="label" :prop="prop">
    <template v-if="subtitle" #default="{ row }">
      <KSpace v-if="wrapSpace" :direction="wrapDirection" :gap="wrapGap">
        <span>{{ getObjectFromKey(row, props.label) }}</span>
        <span>{{ getObjectFromKey(row, props.subTitle) }}</span>
      </KSpace>
    </template>
  </el-table-column>
</template>
<style lang="scss" scoped></style>
